<template>
  <div class="app-container">
    <promptMsg/>
    <div class="box">
      <div class="main">
        <el-tabs v-model="activeName" @tab-click="handleClick">
          <el-tab-pane
            v-for="(item, index) in tabtitle"
            :key="index"
            :label="item.text"
            :name="item.name"
          >
          </el-tab-pane>
        </el-tabs>
      </div>
      <component :is="tabtitle[Index].modules"></component>
    </div>

  </div>
</template>

<script>
import list from "./components/commodity_shop";
import upper from "./components/commodity_upper";
import lower from "./components/commodity_lower";
import recycle from "./components/commodity_recycle";

export default {
  name: "commodity_list",
  components: {
    list,
    upper,
    lower,
    recycle
  },
  data() {
    return {
      //tab切换
      tabtitle: [
        {
          text: "商品列表",
          con: "内容1",
          name: "first",
          modules: list,
          num: 0
        },
        {
          text: "上架商品",
          con: "内容2",
          name: "second",
          modules: upper,
          num: 1
        },
        {
          text: "下架商品",
          con: "内容3",
          name: "third",
          modules: lower,
          num: 2
        },
        {
          text: "商品回收站",
          con: "内容2",
          name: "four",
          modules: recycle,
          num: 3
        },
      ],
      Index: 0,
      activeName: "first",
    };
  },
  created() {
    this.Index = localStorage.getItem("iii") ? localStorage.getItem("iii") : 0;
  },
  mounted() {
    this.activeName = localStorage.getItem("i");
  },
  methods: {
    handleClick(tab, event) {
      localStorage.setItem("i", tab.name);//存放刷新状态
      if (tab.label === "商品列表") {
        localStorage.setItem("iii", 0)//存放动态组件状态
        this.Index = 0
      } else if (tab.label === "上架商品") {
        localStorage.setItem("iii", 1);
        this.Index = 1
      } else if (tab.label === "下架商品") {
        localStorage.setItem("iii", 2);
        this.Index = 2
      } else if (tab.label === "商品回收站") {
        localStorage.setItem("iii", 3);
        this.Index = 3
      }
    },
  },
};
</script>
<style scoped>
ul,
li {
  list-style: none;
}

a {
  text-decoration: none;
}

.app-container {
  min-width: 1050px;
}

.box {
  width: 95%;
  height: 100%;
  margin: 0 auto;
}

.main {
  width: 100%;
  overflow: hidden;
  margin: 0 auto;
}

</style>
